<template>
  <div class="container">
    <div class="top-div">
      <div style="display: flex;align-items: center;">
        <div style="font-weight: 600;width: 80px;">按模块:</div>
        <el-checkbox-group v-model="moduleList" style="margin-left: 20px;">
          <el-checkbox label="新增案件信息统计"></el-checkbox>
          <el-checkbox label="全流程信息统计"></el-checkbox>
          <el-checkbox label="案件风险数据"></el-checkbox>
          <el-checkbox label="人员风险数据"></el-checkbox>
          <el-checkbox label="系统登录"></el-checkbox>
          <el-checkbox label="平台预览"></el-checkbox>
        </el-checkbox-group>
      </div>
      <div style="display: flex;align-items: center;margin-top: 10px;">
        <div style="font-weight: 600;width: 80px;">操作时间:</div>
        <el-date-picker
            clearable
            style="width: 400px;margin-left: 20px;"
            v-model="currentDate"
            format="yyyy-MM-dd HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div style="display: flex;align-items: center;margin-top: 10px;justify-content: space-between">
        <div style="display: flex;align-items: center;">
          <div style="font-weight: 600;width: 80px;">操作人:</div>
          <el-input v-model="userName" clearable placeholder="请输入操作人姓名，支持模糊搜索"
                    style="width: 400px;margin-left: 20px;"></el-input>
        </div>
        <div style="display: flex;align-items: center;">
          <el-button type="primary" @click="initLogList">过滤</el-button>
          <el-button @click="clear">重置</el-button>
          <el-button type="danger" @click="deleteLogs">清理日志</el-button>
        </div>
      </div>
    </div>
    <el-table @selection-change="handleSelectionChange" v-loading="tableShow"
              style="width: 100%;height: calc(100vh - 305px);margin-top: 20px;" :data="tableData"
              border>
      <el-table-column
          type="selection">
      </el-table-column>
      <el-table-column label="序号" align="left" width="50px" type="index" :index="indexMethod">
      </el-table-column>
      <el-table-column label="所属模块" align="center" min-width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.module }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作内容" align="left" min-width="150">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.content }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="left" min-width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.userName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作时间" align="left" min-width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.accessDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="IP地址" align="left" min-width="100">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.ipAddress }}</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex;justify-content: center;padding-top: 10px;">
      <el-pagination
          background
          :total="totalCount"
          :page-size="pageSize"
          @current-change="current_change"
          @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import api from '@/utils/api';
import addRoleManager from "@/page/dialog/addRoleManager.vue";

export default {
  mounted() {
    this.initLogList()
  },
  components: {addRoleManager},
  data() {
    return {
      currentDate: [],
      name: '',
      tableShow: false,
      pageNum: 1,
      pageSize: 8,
      totalCount: 1,
      tableData: [],
      sourceTableData: [],
      currentIndex: null,
      moduleList: [
        '新增案件信息统计',
        '全流程信息统计',
        '案件风险数据',
        '人员风险数据',
        '系统登录',
        '平台预览',
      ],
      userName: '',
      ids: []
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.ids = val
    },
    deleteLogs() {
      if (this.ids.length == 0) {
        this.alertError('请勾选清理的日志')
        return
      }
      let ids = this.ids.map((item) => {
        return item.id
      })
      const self = this
      const obj = {}
      obj.ids = ids
      api.deleteAllLog(obj)
          .then(res=>{
            if (res.code == 200) {
              self.$message.success(res.msg);
              self.initLogList()
            } else {
              self.$message.error(res.msg);
            }
          })
    }, clear() {
      this.moduleList = [
        '新增案件信息统计',
        '全流程信息统计',
        '案件风险数据',
        '人员风险数据',
        '系统登录',
        '平台预览',
      ]
      this.currentDate = ''
      this.userName = ''
      this.initLogList()
    },
    initLogList() {
      console.log(this.moduleList)

      this.tableShow = true
      const self = this;
      const param = {}
      param.userName = this.userName
      param.moduleList = this.moduleList
      param.pageNum = self.pageNum
      param.pageSize = self.pageSize
      if (this.currentDate.length > 0) {
        param.startDate = this.currentDate[0]
        param.endDate = this.currentDate[1]
      } else {
        param.startDate = ''
        param.endDate = ''
      }
      api.logList(param).then(response => {
        if (response.code == 200) {
          self.tableData = response.data.data;
          self.totalCount = response.data.total;
          self.tableShow = false
          if (self.totalCount !== 0) {
            if (self.pageNum > Math.ceil(response.data.total / self.pageSize)) {
              self.pageNum = Math.ceil(response.data.total / self.pageSize);
              self.initLogList();
            }
          }
        } else {
          self.$message.error(response.msg);
        }
      })
    },
    current_change(currentPage) {
      this.pageNum = currentPage;
      this.initLogList();
    },
    handleSizeChange(newPageSize) {
      this.pageSize = newPageSize;
      this.initLogList();
    },
    addRole() {
      this.$refs.addRoleManager.open();
    },
    indexMethod(index) {
      return index + 1;
    },
    submitAdd() {
      this.alertSuccess('新增成功')
      this.centerDialogVisible = false
      this.tableData.push(this.addRole)
    },
    submitEdit() {
      this.tableData[this.currentIndex] = this.modifyRole
      this.tableData = JSON.parse(JSON.stringify(this.tableData));
      this.alertSuccess('编辑成功')
      this.centerModifyDialogVisible = false
      console.log(this.tableData)
    },
    edit(scope) {
      this.modifyRole = JSON.parse(JSON.stringify(scope.row));
      this.currentIndex = scope.$index
      this.centerModifyDialogVisible = true
    },
    deleteRole(row) {
    },
    alertSuccess(msg) {
      this.$message({
        message: msg,
        type: 'success'
      });
    },
    alertError(msg) {
      this.$message({
        message: msg,
        type: 'error'
      });
    },
    //角色是院长 、副院长、庭长、执行局长、纪检组、审管办、督察室
    initTable() {
      var data = [
        {
          roleName: '院长',
          roleCode: 'yz',
          remark: '',
          status: '有效',
          auth: '所有庭室'
        },
        {
          roleName: '副院长',
          roleCode: 'fyz',
          remark: '',
          status: '有效',
          auth: '民事审判第三庭、审判监督第一庭'
        },
        {
          roleName: '庭长',
          roleCode: 'tz',
          remark: '',
          status: '有效',
          auth: '刑事审判第一庭、刑事审判第二庭'
        },
        {
          roleName: '执行局长',
          roleCode: 'zxjz',
          remark: '',
          status: '有效',
          auth: '执行局、审判管理办公室'
        },
        {
          roleName: '纪检组',
          roleCode: 'jjz',
          remark: '',
          status: '有效',
          auth: '所有庭室'
        },
        {
          roleName: '审管办',
          roleCode: 'sgb',
          remark: '',
          status: '有效',
          auth: '所有庭室'
        },
        {
          roleName: '督察室',
          roleCode: 'dcs',
          remark: '',
          status: '有效',
          auth: '所有庭室'
        }
      ]
      this.tableData = data
      this.total = this.tableData.length
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
    resetTable() {
      var data = [
        {
          code: 1,
          username: 'admin',
          userType: '超级管理员',
          userRole: '',
          deptName: '湖南省纪委',
          phone: '17053070000',
          status: "1"
        },
        {
          code: 2,
          username: '王杰',
          userType: '一般人员',
          userRole: '院长',
          deptName: '长沙市中级人民法院',
          phone: '13896541235',
          status: "0"
        }
      ]

      this.tableData = data
      this.total = this.tableData.length
      this.pageSize = 10
      this.currentPage = 1
      this.tableData = this.getNeedArr(this.tableData, this.pageSize)[this.currentPage - 1]
    },
  }
};
</script>
<style scoped>
.el-form .el-input {
  width: 300px;
}

.el-form .el-select {
  width: 300px;
}

.container-footer {
  text-align: center;
  height: 30px;
  line-height: 30px;
  padding-top: 10px;
}

.top-div {
  padding: 10px;
  display: flex;
  background: #e2ebf2;
  flex-direction: column;
}


.container {
  min-width: 1200px;
  display: block;
  clear: both;
}

.clearfix:after {
  clear: both
}

/deep/ .el-table .el-table__header th,
.el-table .el-table__header tr,
.el-table .el-table__header td {
  background: #f5f8fd;
}


</style>